<style>
#maincontent {
    padding-top: 0px;
}
.navbar-fixed-bottom{display:none !important;}
.course-msg-list {padding-left:0;}
.course-msg-list li {list-style:none;}
audio{    max-width: 100%;}
</style>
<div style="padding:5px 20px">
	<div>
		    <h2 class="Content-title"><?php echo $Course['Course']['name']; ?></h2>
		    
		 	<ul class="nav nav-tabs" style="text-align:center;">
		 		<li class="active"><a href="#course-msg-list" role="tab" data-toggle="tab">教学内容</a></li>
			  	<li><a href="#course-content" role="tab" data-toggle="tab">课程简介</a></li>
			</ul>
			<div class="tab-content"  style="padding:10px;overflow-x:hidden;" id="course-tab-content">
				<div id="course-msg-list" class="tab-pane active clearfix" style="padding: 0;position: relative;">
					<ul class="course-msg-list">
					<!-- portlet cache="no" reverse="true" portlet="body" list_tpl="inner" limit="50" model="CourseMsg" order="id desc" info="conditions[course_id]=$course_id">
						{{if $item['cate_id'] == 2 }}
							<li class="msg-item" data-id="{{$item['id']}}"><p style="text-align:left;" >{{$item['msg_text']}}</p></li>
						{{elseif $item['cate_id'] == 1 }}
							<li class="msg-item" data-id="{{$item['id']}}"><audio controls src="{{$item['fileurl']}}"/></li>
						{{elseif $item['cate_id'] == 3 }}
							<li class="msg-item" data-id="{{$item['id']}}"><img src="{{$item['fileurl']}}"/></li>
						{{/if}}
					</portlet> -->
					</ul>
				</div>
				<div id="course-content" class="tab-pane  clearfix" style="position: relative;">
					<div class="Content-body clearfix">
				    	<?php echo $Course['Course']['content']; ?>
					</div>
				</div>				
			</div>
	</div>
	
	
</div>
<div style="position:fixed;bottom:0;width:100%;padding:0 20px 5px;background:#FFF;">
		<div id="send-voice" style="position:relative;">
			<i class="fa fa-keyboard-o" style="position:absolute;margin:0 10px;font-size: 22px;line-height: 32px;cursor:pointer;"></i> 
			<div style="margin:0 0 0 50px;"><button style="display:block;width:100%;height:32px;" id="record-btn" >按住 说话</button></div>
		</div>
		
		<div id="send-text" style="position:relative;display:none;">
			<i class="fa fa-volume-up" style="position:absolute;margin:0 10px;font-size: 22px;line-height: 50px;cursor:pointer;"></i>
			
			<div style="margin:0 100px 0 50px;"><textarea rows="2" style="height:42px;padding:5px;line-height:16px;font-size:14px;" class="form-control" id="msg_text"></textarea></div>
			<button  style="position:absolute;margin:0 10px;right:0; top:5px;font-size: 22px;line-height: 32px;" class="btn btn-primary" id="btn-send-text">发送</button>
		</div>
</div>

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script>
var course_id = {{$Course['Course']['id']}};
var msgInterval = null;

function showSuccessMessage(text){} //去除成功的消息提示

function loadNew(){
	var last_item = $('.course-msg-list').find('.msg-item:last');
	var id = last_item.data('id');
	//if( last_item.data('type') == "self" || typeof(id) == "undefined") {
	//	return;
	//}
	// 1=>语音,2=>文字,3=>图片
	ajaxAction('/course_msgs/getlist/'+course_id+'/max/'+id,null,null,function(request){
		for(var i in request.datalist) {
			
			var html = '<li class="msg-item" data-id="'+request.datalist[i].CourseMsg.id+'"><section style="margin-bottom:1em;"><section style="display: inline-block; line-height: 20px; vertical-align: top;margin-right:6px;">'
            +'<img src="'+(request.datalist[i].User.avatar ? request.datalist[i].User.avatar : '/img/avatar/head.jpg')+'" style="vertical-align: top; width: 40px; margin: 0px; height: auto !important;"/></section>'
            +'<section style="display:inline-block;margin-top:0.5em;transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);">'
            +'<img src="http://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpei9jWlYyaFJwdUFQZ09NaWJjMmRPcG9HM2FmTEJ6RXc5UUtDaEtWVEJWdTBiQ1JoVXBma0l5Y3B3QTV6YXlubTg5Zm4xMzJOa3hyd3FJYXZJNnRWZlpsOXcvMA==" style="width: 10px; margin: 0px;"/>'
            +'</section>'
            +'<section style="min-height: 2.5em; border: 1px solid rgb(230, 230, 230); padding: 0.6em; border-radius: 0.4em; vertical-align: top; display: inline-block; margin-left: -2px; max-width: 70% !important; background: rgb(254, 254, 254);">'
            +'<p style="line-height: 1.2; margin: 0px;font-size: 14px;">';
            
			if( request.datalist[i].CourseMsg.cate_id == 2 ) {
				html += request.datalist[i].CourseMsg.msg_text;
			}
			else if(request.datalist[i].CourseMsg.cate_id == 1){
				html += '<audio controls src="'+request.datalist[i].CourseMsg.fileurl+'"/>';
			}
			else if(request.datalist[i].CourseMsg.cate_id == 3){
				html += '<img src="'+request.datalist[i].CourseMsg.fileurl+'"/>';
			}
            
            +'</p></section></section></li>';
       
			
			
            
            $('.course-msg-list').append(html);
		}
	});
}

$(function(){
	$('.fa-keyboard-o').click(function(){
		$('#send-voice').hide();
		$('#send-text').show();
	});
	$('.fa-volume-up').click(function(){
		$('#send-text').hide();
		$('#send-voice').show();		
	});
	
	$('#course-tab-content').height( $(window).height() - 65 - 55 - 40);
	
	$('#btn-send-text').click(function(){
		$('#btn-send-text').attr('disabled','disabled');
		ajaxAction('/course_msgs/add',{'course_id':{{$Course['Course']['id']}},msg_text:$('#msg_text').val()},null,function(request){
			$('#btn-send-text').removeAttr('disabled');
			$('.course-msg-list').append('<li class="msg-item" data-type="self" data-id="'+request.data.CourseMsg.id+'">'+request.data.CourseMsg.msg_text+'</li>');
			$('#msg_text').val('');
		});
	});
	loadNew();
	msgInterval = setInterval(loadNew,5000);
});

// https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN

wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: "{{$signPackage['appId']}}", // 必填，公众号的唯一标识
    timestamp: {{$signPackage['timestamp']}}, // 必填，生成签名的时间戳
    nonceStr: "{{$signPackage['nonceStr']}}", // 必填，生成签名的随机串
    signature: "{{$signPackage['signature']}}",// 必填，签名，见附录1
    jsApiList: ['checkJsApi','startRecord','stopRecord','onVoiceRecordEnd','playVoice','pauseVoice','stopVoice','onVoicePlayEnd','uploadVoice','downloadVoice','translateVoice','chooseImage','uploadImage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

var record_status = false;

function startRecord(){
	//开始录音接口
	wx.startRecord();
	record_status = true;
}

wx.onVoiceRecordEnd({
    // 录音时间超过一分钟没有停止的时候会执行 complete 回调
    complete: function (res) {
        var localId = res.localId; 
        record_status = false;
    }
});

function stopRecord(){
	record_status = false;
	//开始录音接口
	wx.stopRecord({
	    success: function (res) {
	        var localId = res.localId;
	        
	        wx.uploadVoice({
	            localId: localId, // 需要上传的音频的本地ID，由stopRecord接口获得
	            isShowProgressTips: 1, // 默认为1，显示进度提示
	            success: function (res) {
	                var serverId = res.serverId; // 返回音频的服务器端ID
	                if(serverId) {
	                	saveMediafile(serverId,1);// 1=>语音,2=>文字,3=>图片
	                }
	                else{
	                	alert('录音文件上传微信发生错误，请检查网络是否正常。');
	                }
	            }
	        });
	    }
	});
}
// 1=>语音,2=>文字,3=>图片
function saveMediafile(media_id,cate_id){
	
	ajaxAction('/course_msgs/add_media',{'course_id':{{$Course['Course']['id']}},'appid':'{{$appid}}','cate_id':cate_id,'media_id':media_id},null,function(request){
		if(request.data.cate_id == 1){
			$('.course-msg-list').append('<li class="msg-item" data-type="self" data-id="'+request.data.id+'"><audio controls src="'+request.data.fileurl+'"/></li>');
		}
		else if(request.data.cate_id == 3){
			$('.course-msg-list').append('<li class="msg-item" data-type="self" data-id="'+request.data.id+'"><img src="'+request.data.fileurl+'"/></li>');
		}
	});
}

window.onload = function() {  
    document.addEventListener("touchstart",touchStart, false);  
    document.addEventListener("touchend",touchEnd, false);  
}

function touchStart(event) {
    if(event.touches[0].target.id == 'record-btn'){
    	event.preventDefault();
    	startRecord();
    	$('#record-btn').html('松开 结束');
    }
}

function touchEnd(event) {  
    if( event.changedTouches[0].target.id == "record-btn"){
    	event.preventDefault();
    	stopRecord();
    	$('#record-btn').html('按住 说话');
    }
}

/*$('#record-btn').click(function(){
	if(record_status == false) {
		startRecord();
	}
	else{
		stopRecord();
	}
});*/




</script>